頁腳(Footer)雖然在最下方,但它扮演著重要的角色,通常包含版權資訊、聯絡方式或社群媒體連結。
好的頁腳設計應該簡潔、清晰,並且能與整體網頁風格一致。
在作品集頁面最下方,新增一個頁腳區塊 <div class="footer">
。
HTML
<footer class="footer">
<div class="social-links">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
</div>
<p>© 2025 小包. All rights reserved.</p>
</footer>
在 style.css 中,為頁腳加上樣式:
CSS
.footer {
text-align: center;
padding: 20px;
background-color: #34495e;
color: white;
}
.social-links a {
color: white;
font-size: 24px;
margin: 0 10px;
}
這個頁腳包含了社群媒體圖標和版權宣告,讓網頁看起來更完整。
執行成果 :